<div class="form-group clearfix">
  <div class="pull-left form-inline">
    <button type="button" class="btn btn-default" (click)="goBack()">返回</button>
  </div>
</div>

<form #addActivityForm="ngForm" class="admin-style">
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">活动名称</label>
    <div class="col-md-4">
      <input type="text" class="form-control" id="activity_name" [ngModelOptions]="{standalone: true}"
             [(ngModel)]="addActivity.activity_name" name="activity_name"
             (ngModelChange)="WidthCheck('name',addActivity.activity_name,24, $event)" required>
      <div *ngIf="nameError" style="color:red;">最多12个字或者24个英文</div>
      <div *ngIf="nameRequired" style="color:red;">活动名称不能为空</div>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">活动分类</label>
    <div class="col-md-4">
      <select class="form-control" [(ngModel)]="addActivity.first_category_id" [ngModelOptions]="{standalone: true}">
        <option value="{{ item.id }}" *ngFor="let item of categoryList">{{ item.category_name }}</option>
      </select>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">活动类型</label>
    <div class="col-md-4">
      <select class="form-control" [(ngModel)]="addActivity.type" [ngModelOptions]="{standalone: true}">
        <option value="2">普通活动</option>
        <option value="1">新手商品集</option>
      </select>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">添加任务:</label>
    <div class="col-md-4">
      <button nz-button [nzType]="'default'" (click)="addTask($event)">
        <span>{{ checkedTaskInfo.length === 0 ? '添加任务' : '编辑任务' }}</span>
      </button>
      <div *ngIf="taskRequired" style="color:red;">任务不能为空</div>
    </div>
  </div>
  <div class="form-group clearfix" *ngIf="checkedTaskInfo.length > 0">
    <label class="col-md-1 col-md-offset-2">选中的任务:</label>
    <div class="col-md-4">
      <div class="checked-wrap" *ngFor="let task of checkedTaskInfo;let i = index;">
        <div class="checked-info">
          <span>任务名称: </span>
          <span>{{ task.task_name }}</span>
        </div>
        <div class="checked-info">
          <span>任务编号: </span>
          <span>{{ task.task_no  }}</span>
        </div>
        <div class="checked-info">
          <span>任务图片: </span>
          <img style="width:50px;height:50px;" src="{{ task.taskPreview }}" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">活动图片</label>
    <div class="col-md-4">
      <app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo" [outMargin]="'20px'"
                  (piclistChange)="fileChange()" (fileListChange)="fileChange()" [canChange]="canChange">
      </app-upload>
      <div *ngIf="picError" style="color:red;">请上传一张图片</div>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">活动排序</label>
    <div class="col-md-4">
      <!--(ngModelChange)="checkSort($event)"-->
      <!--<input type="number" class="form-control" id="sort" [(ngModel)]="addActivity.sort" (ngModelChange)="checkSort($event)" name="sort" required>-->
      <nz-input type="number" class="form-control" id="sort" [(ngModel)]="addActivity.sort" (ngModelChange)="checkSort($event)" name="sort" required></nz-input>
      <div *ngIf="sortRequired" style="color:red;">排序不能为空</div>
      <div *ngIf="sortError" style="color:red;">排序有误</div>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-md-1 col-md-offset-2">活动推荐语</label>
    <div class="col-md-4">
      <textarea type="text" class="form-control" id="comment" [(ngModel)]="addActivity.comment" name="comment"
                (ngModelChange)="WidthCheck('comment',addActivity.comment,40, $event)"></textarea>
      <div *ngIf="commentError" style="color:red;">推荐语最多20个字</div>
      <div *ngIf="commentRequired" style="color:red;">推荐语不能为空</div>
    </div>
  </div>
</form>
<div class="col-md-4 col-md-offset-3 mt20">
  <button class="btn btn-success btn-md-long" type="button" nz-button [nzLoading]="submitStatus"
          (click)="editId ? editActivityFormSubmit($event) : addActivityFormSubmit($event);">{{ submitStatus ? '提交中' :
    '提 交' }}
  </button>
  <button class="btn btn-default btn-md-long" type="button" nz-button (click)="goBack()">取 消</button>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="isShow = $event"></app-notification>


<!-- 添加活动弹窗 -->
<nz-modal
  [nzVisible]="taskModalVisible"
  [nzTitle]="'添加任务'"
  [nzWidth]="'1200px'"
  [nzContent]="taskModalContent"
  [nzZIndex]="99999"
  [nzConfirmLoading]="isConfirmTaskLoading"
  (nzOnCancel)="closeTaskModal()"
  (nzOnOk)="closeTaskModal()"
>
  <ng-template #taskModalContent>
    <!--<div class="operate-line text-right">-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="merchant_id"-->
    <!--[nzPlaceHolder]="'输入商户ID'"></nz-input>-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="task_name"-->
    <!--[nzPlaceHolder]="'输入任务名称'"></nz-input>-->
    <!--<nz-select style="width: 200px;" nzAllowClear [nzSize]="'large'" [nzPlaceHolder]="'请选择活动类型'" [(ngModel)]="selectedGroup" [nzShowSearch]="true">-->
    <!--<nz-option *ngFor="let type of typeList" [nzLabel]="type.label" [nzValue]="type.value">-->
    <!--</nz-option>-->
    <!--</nz-select>-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="first_category"-->
    <!--[nzPlaceHolder]="'输入一级分类'"></nz-input>-->
    <!--<nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="second_category"-->
    <!--[nzPlaceHolder]="'输入二级分类'"></nz-input>-->
    <!--<button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="search()">-->
    <!--<span>查 询</span>-->
    <!--</button>-->
    <!--<button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">-->
    <!--<span>重 置</span>-->
    <!--</button>-->
    <!--</div>-->

    <nz-table
      [nzAjaxData]="taskList"
      [nzLoading]="taskLoading"
      [(nzPageIndex)]="taskPage"
      [(nzPageSize)]="taskPageSize"
      [nzTotal]="taskTotal"
      (nzPageIndexChange)="getTaskList()"
    >
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox style="width:80px;"></th>
        <th nz-th style="width: 100px;">
          <span>任务名称</span>
        </th>
        <th nz-th>
          <span>任务图片</span>
        </th>
        <th nz-th>
          <span>任务积分</span>
        </th>
        <th nz-th>
          <span>任务状态</span>
        </th>
        <th nz-th>
          <span>创建时间</span>
        </th>
        <th nz-th>
          <span>结束时间</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <ng-container *ngFor="let data of taskList;let i = index;">
        <tr nz-tbody-tr>
          <td nz-td nzCheckbox>
            <label nz-checkbox (ngModelChange)="dealTask($event,data)" [(ngModel)]="data.checked"></label>
          </td>
          <td nz-td>
            {{ data.task_name }}
          </td>
          <td nz-td>
            <img style="width:50px;height:50px;" [src]="data.taskPreview" alt="">
          </td>
          <td nz-td style="font-size: 12px;">
            {{ data.point }}
          </td>
          <td nz-td>
            <ng-container *ngIf="data.status === 0"><span class="ant-badge-status-dot ant-badge-status-success"></span>&nbsp;正常
            </ng-container>
            <ng-container *ngIf="data.status === 1"><span class="ant-badge-status-dot ant-badge-status-error"></span>&nbsp;暂停
            </ng-container>
          </td>
          <td nz-td>
            {{ data.validity_start }}
          </td>
          <td nz-td>
            {{ data.validity_end }}
          </td>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加活动弹窗 end -->


<!--<nz-modal [nzVisible]="isVisible" [nzTitle]="'选择商品'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">-->
  <!--<ng-template #modalContent>-->
    <!--<div style="height:400px;overflow:auto;">-->
      <!--<div class="task-search">-->
        <!--<label>任务名称</label>-->
        <!--<nz-input [(ngModel)]="taskNameShow" style="width:120px;" [nzPlaceHolder]="'请输入任务名称'"></nz-input>-->
        <!--<label>分类</label>-->
        <!--<div style="display:inline-block">-->
          <!--<nz-cascader nzPlaceHolder="请选择商品"-->
                       <!--style="width:180px;"-->
                       <!--[(ngModel)]="typeValue"-->
                       <!--(ngModelChange)="_console($event)"-->
                       <!--(nzChange)="_console($event)"-->
                       <!--(nzLoad)="loadData($event)">-->
          <!--</nz-cascader>-->
        <!--</div>-->
        <!--<button nz-button [nzType]="'primary'" (click)="search1()">-->
          <!--<span>搜索</span>-->
        <!--</button>-->
      <!--</div>-->
      <!--<div class="task-list" style="margin-top:10px">-->
        <!--<nz-table [nzTotal]="taskTotal" [nzPageSize]="taskPageSize" #nzTable [nzAjaxData]="taskList" [nzPageIndex]="taskPage" (nzPageIndexChangeClick)="changePage($event)" >-->
          <!--<thead nz-thead>-->
          <!--<tr>-->
            <!--<th nz-th></th>-->
            <!--<th nz-th style="width:80px"><span>id</span></th>-->
            <!--<th nz-th><span>任务名称</span></th>-->
          <!--</tr>-->
          <!--</thead>-->
          <!--<tbody nz-tbody>-->
          <!--<tr nz-tbody-tr *ngFor="let data of taskList;let i = index" >-->
            <!--<td nz-td [nzCheckbox]="true">-->
              <!--<label nz-checkbox [ngModel]="data.id==checkId?true:false" (ngModelChange)="_refreshStatus($event,data)">-->
              <!--</label>-->
            <!--</td>-->
            <!--<td nz-td>-->
              <!--<a>{{data.id}}</a>-->
            <!--</td>-->
            <!--<td nz-td>{{data.task_name}}</td>-->
          <!--</tr>-->
          <!--</tbody>-->
        <!--</nz-table>-->
      <!--</div>-->
    <!--</div>-->
  <!--</ng-template>-->
<!--</nz-modal>-->

